Vue Router 是 Vue.js 官方的路由管理器。它与 Vue.js 的核心库深度集成，可以非常方便地与其他 Vue 组件配合使用。Vue Router 允许开发者构建单页应用，通过不同的 URL 路由来加载不同的页面内容。在本文中，我们将详细介绍 Vue Router 的使用方法和一些常见的应用场景。
一、安装和基本使用
首先，我们需要通过 npm 或者 yarn 来安装 Vue Router。在终端中执行以下命令：
```
npm install vue-router
```
或者
```
yarn add vue-router
```
安装完成后，我们就可以在项目中引入 Vue Router，并在 Vue 的实例中使用它了。
```javascript
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
```
接下来，我们可以创建一个路由实例，并定义一些路由规则。
```javascript
const router = new VueRouter({
routes: [
{
path: '/'
component: Home
}
{
path: '/about'
component: About
}
]
});
```
在上面的代码中，我们创建了两个路由规则。当访问根路径 '/' 时，会加载 Home 组件；当访问 '/about' 路径时，会加载 About 组件。
*，我们需要把路由实例挂载到 Vue 实例中。
```javascript
new Vue({
router
render: h => h(App)
}).$mount('#app');
```
现在，我们可以在组件中使用 ` ```html ``` 以上就是 Vue Router 的基本使用方法。通过定义路由规则，并使用 ` 二、路由参数和动态路由匹配 Vue Router 还支持路由参数和动态路由匹配。这使得我们可以根据不同的参数来加载不同的组件。 首先，我们可以通过 `:` 来定义路由参数。 ```javascript const router = new VueRouter({ routes: [ { path: '/user/:id' component: User } ] }); ``` 在上面的代码中，我们定义了一个带有参数的路由规则。当访问 '/user/:id' 路径时，会根据 id 参数来加载 User 组件。 在 User 组件中，我们可以通过 `$route.params` 来获取参数值。 ```javascript export default { mounted() { console.log(this.$route.params.id); } } ``` 在上面的代码中，我们在组件的 `mounted` 钩子函数中打印出了参数值。 除了路由参数，Vue Router 还支持动态路由匹配。例如，我们可以通过通配符 `*` 来匹配任意路径，并加载对应的组件。 ```javascript const router = new VueRouter({ routes: [ { path: '/user/*' component: NotFound } ] }); ``` 在上面的代码中，我们定义了一个通配符路由规则。当访问 '/user/*' 路径时，会加载 NotFound 组件。 在 NotFound 组件中，我们可以通过 `$route.path` 来获取匹配的路径。 ```javascript export default { mounted() { console.log(this.$route.path); } } ``` 以上就是路由参数和动态路由匹配的用法。通过使用路由参数和通配符来匹配不同的路径，我们可以根据不同的需求加载不同的组件。 三、嵌套路由 Vue Router 还支持嵌套路由，这使得我们可以在一个路由下继续定义子路由。 首先，我们可以在路由规则中使用 `children` 来定义子路由。 ```javascript const router = new VueRouter({ routes: [ { path: '/user' component: User children: [ { path: 'profile' component: UserProfile } { path: 'settings' component: UserSettings } ] } ] }); ``` 在上面的代码中，我们在 '/user' 路径下定义了两个子路由。当访问 '/user/profile' 路径时，会加载 UserProfile 组件；当访问 '/user/settings' 路径时，会加载 UserSettings 组件。 我们还可以在父组件中使用 ` ```html ``` 以上就是嵌套路由的用法。通过在父组件中使用 ` 四、导航守卫 Vue Router 提供了导航守卫来控制路由的跳转行为。我们可以在跳转前、跳转后以及跳转被拒绝的情况下执行一些操作。 首先，我们可以使用 `beforeEach` 方法来定义全局前置守卫。 ```javascript router.beforeEach((to from next) => { console.log('beforeEach'); next(); }); ``` 在上面的代码中，我们定义了一个全局前置守卫。每次跳转路由时，都会执行该守卫函数。 守卫函数接受三个参数： - `to`：即将跳转的路由对象。 - `from`：当前的路由对象。 - `next`：一个函数，用于控制跳转行为。调用 `next()` 会继续跳转，调用 `next(false)` 会取消跳转。 我们还可以在路由规则中使用 `beforeEnter` 方法来定义路由独享的守卫。 ```javascript { path: '/about' component: About beforeEnter: (to from next) => { console.log('beforeEnter'); next(); } } ``` 在上面的代码中，我们定义了一个路由独享的守卫。仅当访问 '/about' 路径时，才会执行该守卫函数。 除了前置守卫，Vue Router 还提供了其他导航守卫，例如 `beforeResolve`、`afterEach` 等。这些守卫可以帮助我们更细粒度地对路由进行控制。 五、路由懒加载 当应用程序变得庞大时，我们可能需要按需加载路由组件，以降低首页的加载时间。Vue Router 提供了路由懒加载的功能，使得我们可以在需要时才去加载相应的组件。 首先，我们可以在路由规则中使用 `component` 的值来引入一个异步组件。 ```javascript { path: '/about' component: () => import('./About.vue') } ``` 在上面的代码中，我们使用了动态 `import()` 语法引入了一个异步组件。这里的 `./About.vue` 是要引入的文件路径。 在使用路由懒加载时，可以对组件进行拆分，并按需引入。这样，在访问到对应的路由时，才会去加载相应的组件。 六、导航进度条 Vue Router 提供了导航进度条的功能，可以在页面跳转时显示一个进度条来提示用户。 首先，我们可以在路由配置中开启导航进度条。 ```javascript const router = new VueRouter({ routes: [...] mode: 'history' base: process.env.BASE_URL scrollBehavior linkActiveClass: 'active' linkExactActiveClass: 'exact-active' fallback: true parseQuery stringifyQuery normalizeLocation }); ``` 在上面的代码中，我们通过设置 `linkActiveClass` 和 `linkExactActiveClass` 来指定激活状态的样式类。这样在当前路由匹配成功时，路由链接就会添加对应的样式类。 我们还可以在页面中添加一个 ` ```html ``` 在上面的代码中，我们使用 ` Vue Router 的导航进度条功能非常简单，只需要设置一些配置项就可以使用。 总结 本文中，我们介绍了 Vue Router 的基本使用方法，并详细说明了路由参数和动态路由匹配、嵌套路由、导航守卫、路由懒加载和导航进度条等功能的用法。通过使用 Vue Router，我们可以方便地构建单页应用，并实现复杂的路由跳转控制。希望本文对大家学习和使用 Vue Router 有所帮助。My App
User Page
My App
咨询微信客服
0516-6662 4183
立即获取方案或咨询
top
